<template>
  <div>
    <el-card
      style="
         {
          width: 100% !important;
        }
      "
      shadow="never"
    >
      <div slot="header">
        <h2>机上功能试验排故过程记录表</h2>
      </div>
      <div>
        <el-form ref="form" :model="form" label-width="200px" :inline="true">
          <h3>基础信息</h3>
          <el-form-item
            label="飞机型号"
            prop="model"
            :rules="{
              required: true,
              message: '请输入飞机型号',
              trigger: 'blur',
            }"
          >
            <el-input v-model="form.model" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item
            label="编号"
            prop="number"
            :rules="{
              required: true,
              message: '请输入编号',
              trigger: 'blur',
            }"
          >
            <el-input v-model="form.number" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item
            label="制造序列号"
            prop="serialnumber"
            :rules="{
              required: true,
              message: '请输入制造序列号',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="form.serialnumber"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item
            label="故障对应工艺计划文件号"
            prop="documentnumber"
            :rules="{
              required: true,
              message: '请输入故障对应工艺计划文件号',
              trigger: 'blur',
            }"
          >
            <el-input v-model="form.documentnumber" style="width: 200px">
              <i slot="suffix" class="el-input__icon el-icon-document"></i>
            </el-input>
          </el-form-item>
          <el-form-item
            label="排故日期"
            prop="workdate"
            :rules="{
              required: true,
              message: '请输入排故日期',
              trigger: 'blur',
            }"
          >
            <el-input v-model="form.workdate" style="width: 200px">
              <i slot="suffix" class="el-input__icon el-icon-date"></i>
            </el-input>
          </el-form-item>
          <el-form-item
            label="负责工艺员"
            prop="processer"
            :rules="{
              required: true,
              message: '请输入负责工艺员姓名',
              trigger: 'blur',
            }"
          >
            <el-input v-model="form.processer" style="width: 200px">
              <i slot="suffix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <br />
          <el-divider></el-divider>
          <h3>故障描述</h3>
          <div style="text-align: center">
            <el-input
              v-model="form.description"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 8 }"
              placeholder="请输入故障详细信息"
              style="width: 800px"
              maxlength="300"
              show-word-limit
            ></el-input>
          </div>
          <el-divider></el-divider>
          <h3>排故步骤</h3>
          <div>
            <div>010</div>
            <el-form-item
              label="检查或者操作描述"
              prop="onetest"
              :rules="{
                required: true,
                message: '请输入检查或者操作描述',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="form.onetest"
                type="textarea"
                style="width: 300px"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>

            <el-form-item
              label="检查结果"
              prop="oneresult"
              :rules="{
                required: true,
                message: '请输入检查结果',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="form.oneresult"
                type="textarea"
                style="width: 300px"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>
            <span></span>
            <el-form-item
              label="制造签字或者盖章"
              prop="oneoperator"
              :rules="{
                required: true,
                message: '请输入制造签字或者盖章',
                trigger: 'blur',
              }"
            >
              <el-input v-model="form.oneoperator" style="width: 200px">
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-s-cooperation"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item
              label="检验签字或者盖章"
              prop="oneinspector"
              :rules="{
                required: true,
                message: '请输入检验签字或者盖章',
                trigger: 'blur',
              }"
            >
              <el-input v-model="form.oneinspector" style="width: 200px">
                <i slot="suffix" class="el-input__icon el-icon-s-check"></i>
              </el-input>
            </el-form-item>
            <el-form-item
              label="是否需要质量检验"
              prop="oneinspection"
              :rules="{
                required: true,
              }"
            >
              <el-tooltip
                :content="'是否需要质量检验： ' + form.oneinspection"
                placement="top"
              >
                <el-switch
                  v-model="form.oneinspection"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="否"
                  inactive-value="是"
                ></el-switch>
              </el-tooltip>
            </el-form-item>
            <el-divider></el-divider>
          </div>
          <div>
            <div>020</div>
            <el-form-item
              label="检查或者操作描述"
              prop="twotest"
              :rules="{
                message: '请输入检查或者操作描述',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="form.twotest"
                type="textarea"
                style="width: 300px"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>

            <el-form-item
              label="检查结果"
              prop="tworesult"
              :rules="{
                message: '请输入检查结果',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="form.tworesult"
                type="textarea"
                style="width: 300px"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>
            <span></span>
            <el-form-item
              label="制造签字或者盖章"
              prop="twooperator"
              :rules="{
                message: '请输入制造签字或者盖章',
                trigger: 'blur',
              }"
            >
              <el-input v-model="form.twooperator" style="width: 200px">
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-s-cooperation"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item
              label="检验签字或者盖章"
              prop="twoinspector"
              :rules="{
                message: '请输入检验签字或者盖章',
                trigger: 'blur',
              }"
            >
              <el-input v-model="form.twoinspector" style="width: 200px">
                <i slot="suffix" class="el-input__icon el-icon-s-check"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="是否需要质量检验" prop="twoinspection">
              <el-tooltip
                :content="'是否需要质量检验： ' + form.twoinspection"
                placement="top"
              >
                <el-switch
                  v-model="form.twoinspection"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="否"
                  inactive-value="是"
                ></el-switch>
              </el-tooltip>
            </el-form-item>
            <el-divider></el-divider>
          </div>
          <div>
            <div>030</div>
            <el-form-item
              label="检查或者操作描述"
              prop="threetest"
              :rules="{
                message: '请输入检查或者操作描述',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="form.threetest"
                type="textarea"
                style="width: 300px"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>

            <el-form-item
              label="检查结果"
              prop="threeresult"
              :rules="{
                message: '请输入检查结果',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="form.threeresult"
                type="textarea"
                style="width: 300px"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>
            <span></span>
            <el-form-item
              label="制造签字或者盖章"
              prop="threeoperator"
              :rules="{
                message: '请输入制造签字或者盖章',
                trigger: 'blur',
              }"
            >
              <el-input v-model="form.threeoperator" style="width: 200px">
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-s-cooperation"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item
              label="检验签字或者盖章"
              prop="threeinspector"
              :rules="{
                message: '请输入检验签字或者盖章',
                trigger: 'blur',
              }"
            >
              <el-input v-model="form.threeinspector" style="width: 200px">
                <i slot="suffix" class="el-input__icon el-icon-s-check"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="是否需要质量检验" prop="threeinspection">
              <el-tooltip
                :content="'是否需要质量检验： ' + form.threeinspection"
                placement="top"
              >
                <el-switch
                  v-model="form.threeinspection"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="否"
                  inactive-value="是"
                ></el-switch>
              </el-tooltip>
            </el-form-item>
            <el-divider></el-divider>
          </div>
          <h3>结论</h3>
          <div style="text-align: center">
            <el-input
              v-model="form.result"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 8 }"
              placeholder="请输入结论"
              style="width: 800px"
              maxlength="300"
              show-word-limit
            ></el-input>
            <el-divider></el-divider>
          </div>
          <div style="margin-top: 20px">
            <h3>签字确认</h3>
            <el-form-item
              label="工艺员签字"
              prop="finalprocesser"
              :rules="{
                required: true,
                message: '请输入工艺员签字',
                trigger: 'blur',
              }"
            >
              <el-input v-model="form.finalprocesser" style="width: 200px">
                <i slot="suffix" class="el-input__icon el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item
              label="检验员签字"
              prop="finalinspector"
              :rules="{
                required: true,
                message: '请输入检验员签字',
                trigger: 'blur',
              }"
            >
              <el-input v-model="form.finalinspector" style="width: 200px">
                <i slot="suffix" class="el-input__icon el-icon-s-check"></i>
              </el-input>
            </el-form-item>
          </div>
          <div style="text-align: center">
            <el-form-item style="width: 100px; height=60px">
              <el-button
                style="background-color: #1094cb"
                type="primary"
                size="medium"
                @click="onSubmit('form')"
              >
                导出
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
  import JSZipUtils from 'jszip-utils'
  import JSZip from 'pizzip'
  import Docxtemplater from 'docxtemplater'
  import { saveAs } from 'file-saver'
  export default {
    data() {
      return {
        form: {
          model: '',
          number: '',
          serialnumber: '',
          documentnumber: '',
          workdate: '',
          processer: '',
          description: '',
          onetest: '',
          oneinspection: '',
          oneoperator: '',
          oneinspector: '',
          twotest: '',
          twoinspection: '',
          twooperator: '',
          twoinspector: '',
          threetest: '',
          threeinspection: '',
          threeoperator: '',
          threeinspector: '',
          result: '',
          fianlprocesser: '',
          finalinspector: '',
        },
      }
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.exportWord()
            console.log('aaaa')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      exportWord() {
        const _this = this
        JSZipUtils.getBinaryContent('/api/uploads/file/t.docx', function (error, content) {
          // 抛出异常
          if (error) {
            console.log('b')
            throw error
          }
          // 创建一个JSZip实例，内容为模板的内容
          let zip = new JSZip(content)
          // 创建并加载docxtemplater实例对象
          let doc = new Docxtemplater().loadZip(zip)
          // 设置模板变量的值
          doc.setData({
            ..._this.form,
          })
          try {
            // 用模板变量的值替换所有模板变量
            doc.render()
          } catch (error) {
            // 抛出异常
            // let e = {
            //   message: error.message,
            //   name: error.name,
            //   stack: error.stack,
            //   properties: error.properties,
            // }
            this.$message.error('导出报表失败')
            throw error
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: 'blob',
            mimeType:
              'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          })
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, '机上功能试验排故过程记录表.docx')
        })
      },
    },
  }
</script>
